<template>
  <!-- 兑换中心 -->
  <div class="box">
    <van-overlay v-show="menu">
      <!-- <div v-show="menu"style="text-align:center;background:#49cce1c7">全部分类</div> -->
      <van-row
        v-for="(ul,j) in list"
        :key="j"
        style="background:#fff;border-top:1px solid silver"
      >
        <van-col
          span="6"
          v-for="(li,l) in ul"
          :key="l"
          style="border-right:1px solid silver"
        >
          <div
            v-if="li.name=='全部'"
            style="padding:10px;background:#00b9ff;border-right:0px"
            @click="showMenuAll()"
          >
            <van-icon name="bars" />
            <div style="font-size:12px">全部</div>
          </div>
          <div
            v-else
            style="padding:10px;"
            @click="showMenu(li.id)"
          >
            <img
              :src="li.type_icon"
              style="height:30px"
            >
            <div style="font-size:12px">{{li.name}}</div>
          </div>

        </van-col>
      </van-row>
    </van-overlay>
    <form action="/">
      <van-search
        shape='round'
        placeholder="请输入奖品名称..."
        v-model="value"
        @search="onSearch"
      />
    </form>
    <div
      style="width:100%;"
      v-show="show"
      v-cloak
    >
      <img
        style="width:100%;height:90.5vh"
        src=""
      >
    </div>
    <div class="grid_list">
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="offset"
        :immediate-check="false"
        finished-text="我是有底线的"
        @load="onLoadlist"
      >
        <van-grid
          :border="false"
          :column-num="2"
          :gutter="5"
        >
          <van-grid-item
            :to="{path:'/commodity',query:{id:item.id}}"
            v-for="(item,i) in goods"
            :key="i"
          >
            <van-image :src="item.thumb" />
            <div style="margin-top:5px">{{item.title}}</div>
            <div class="grid_text"><span class="left">{{item.price}}福分</span>
              <van-button
                class="right"
                type="danger"
                size="mini"
              >兑换</van-button>
            </div>
          </van-grid-item>
        </van-grid>
      </van-list>
    </div>
  </div>
</template>

<script type="text/javascript">
import {
  Search,
  Grid,
  GridItem,
  Image,
  Button,
  Overlay,
  Col,
  Row,
  Icon
} from "vant";
export default {
  data() {
    return {
      value: "",
      menu: false,
      show: false,
      goods: [],
      list: [],
      loading: false, // 上拉加载
      finished: false, // 上拉加载完毕
      offset: 100, // 滚动条与底部距离小于 offset 时触发load事件
      pageSize: 6, // 每页条数
      pageIndex: 1,
      page: 0,
      a: 0,
      b: 0
    };
  },
  components: {
    [Search.name]: Search,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Image.name]: Image,
    [Button.name]: Button,
    [Overlay.name]: Overlay,
    [Col.name]: Col,
    [Row.name]: Row,
    [Icon.name]: Icon
  },
  created() {
    this.getGoods(0, 0, 0);
    this.onClassify();
    this.classification();
    dd.biz.navigation.setTitle({
      title: "兑换中心" //控制标题文本，空字符串表示显示默认文本
    });
  },
  methods: {
    /**
     * rfj
     */
    onLoadlist() {
      const p = this.page;
      this.pageIndex++;
      this.getGoods(p, this.b, this.a);
    },
    // 全部
    showMenuAll() {
      this.b=0;
      this.a=0;
      this.goods=[]
      this.getGoods(0, 0, 0);
      this.menu = false;
    },
    // 分类
    showMenu(type) {
      this.goods = [];
      this.pageIndex = 1;
      this.page = 0;
      this.b = type;
      this.getGoods(0, type, this.a);
      this.menu = false;
    },
    // 分类
    async classification() {
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(`yuepoints/shopType?corpId=${corpId}`);
      this.list = res.data.data;
    },
    //  钉钉菜单方法
    onClassify() {
      let _this = this;
      dd.biz.navigation.setMenu({
        items: [
          {
            id: "1",
            iconId: "type",
            text: "分类",
            url:
              "http://dingcode-tp5.changyuekeji.com/static/app/img/icon/shop_type.png"
          }
        ],
        onSuccess: function(res) {
          if (res.id == 1) {
            _this.menu = true;
          }
        },
        onFail: function(err) {
        }
      });
    },
    // 搜索事件
    onSearch(val) {
      this.goods=[]
      this.a = val;
      this.getGoods(0, this.b, val);
    },
    // 全部商品
    async getGoods(cursor, type, text) {
      let corpId = localStorage.getItem("custid");
      await this.$http
        .get(
          `yuepoints/getGoods?corpId=${corpId}&page=${cursor}&type_id=${type}&share=${text}`
        )
        .then(res => {
          const { data, cursor, errcode } = res.data;
          if (errcode == "0000") {
            if (data.length === 0 || data === null) {
              this.finished = true;
              // this.$toast("数据为空！");
              return;
            }
            if (data.length < this.pageSize) {
              this.finished = true;
            }else{
              this.finished = false;
            }
            if (this.pageIndex === 1) {
              this.goods = data;
            } else {
              this.goods = this.goods.concat(data);
            }
            if (cursor > 0) {
              this.show = false;
              this.page = cursor;
            }
          } else {
            this.finished = true;
            // this.goods = [];
          }
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  padding-bottom: 55px;
  font-size: 14px;
  height: 100%;
  /deep/ .van-icon-bars {
    font-size: 30px;
    color: #a7a8aac7;
  }
  /deep/ .van-grid-item__content--center {
    align-items: flex-start;
  }
  /deep/ .van-grid-item__content {
    padding-bottom: 5px;
  }
  .grid_list {
    .grid_text {
      font-size: 13px;
      margin-top: 10px;
      color: red;
      width: 100%;
    }
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
}
</style>
